<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')

      // 给 canvas 添加鼠标移动事件
      canvas.addEventListener('mousemove', mouseMoving, false)

      function mouseMoving(e) {
        console.log(`当前鼠标在 Canvas 中的位置：x-${e.clientX}   y-${e.clientY}`)
      }
    </script>
  </body>
</html>
 -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" tabindex="0" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取 Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')
      // 给 canvas 添加键盘事件
      canvas.addEventListener('keydown', doKeydown, false)
      canvas.focus()
      function doKeydown(e) {
        switch (e.keyCode) {
          case 37:
            console.log(`按下左键`)
            break
          case 38:
            console.log(`按下上键`)
            break
          case 39:
            console.log(`按下右键`)
            break
          case 40:
            console.log(`按下下键`)
            break
        }
      }
    </script>
  </body>
</html>
  -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" tabindex="0" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取 Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')

      // 设置填充的颜色为橘色
      ctx.fillStyle = 'orange'

      // 获取 x、y 的值
      let x = canvas.width / 2 - 50
      let y = canvas.height / 2 - 50

      // 绘制一个矩形
      ctx.fillRect(x, y, 100, 50)

      // 给 canvas 添加鼠标移动事件
      window.addEventListener('keydown', doKeydown, false)

      function doKeydown(e) {
        ctx.clearRect(0, 0, 500, 500)
        var keyID = e.keyCode ? e.keyCode : e.which
        switch (e.keyCode) {
          case 37:
            console.log(`按下左键`)
            x = x - 10
            ctx.fillRect(x, y, 100, 50)

            break

          case 38:
            console.log(`按下上键`)
            y = y - 10
            ctx.fillRect(x, y, 100, 50)

            break

          case 39:
            console.log(`按下右键`)
            x = x + 10
            ctx.fillRect(x, y, 100, 50)

            break

          case 40:
            console.log(`按下下键`)
            y = y + 10
            ctx.fillRect(x, y, 100, 50)

            break

          default:
            break
        }
      }
    </script>
  </body>
</html>

   -->

<!-- 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1000" height="500" tabindex="0" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取 Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')

      const width = canvas.width
      const height = canvas.height

      const images = [
        {
          name: '头像1',
          url: './tx/1.png'
        },
        {
          name: '头像2',
          url: './tx/2.png'
        },
        {
          name: '头像3',
          url: './tx/3.png'
        },
        {
          name: '头像4',
          url: './tx/4.png'
        },
        {
          name: '头像5',
          url: './tx/5.png'
        }
      ]

      images.forEach(item => {
        // 创建 image 元素
        const image = new Image()
        image.src = item.url
        const name = item.name
        image.onload = () => {
          // 控制图片的宽度为 200px （等宽）
          const w = 200

          // 高度按照宽度 200px 的比例缩放
          const h = (200 / image.width) * image.height
          const x = Math.random() * (width - w)
          const y = Math.random() * (height - h)
          const imageObj = { image, name, x, y, w, h }
          draw(imageObj)
        }
      })

      // 渲染图片
      function draw(imageObj) {
        ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h)
      }
    </script>
  </body>
</html>
    -->

<!-- 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1000" height="500" tabindex="0" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取 Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')

      const width = canvas.width
      const height = canvas.height

      const images = [
        {
          name: '头像1',
          url: './tx/1.png'
        },
        {
          name: '头像2',
          url: './tx/2.png'
        },
        {
          name: '头像3',
          url: './tx/3.png'
        },
        {
          name: '头像4',
          url: './tx/4.png'
        },
        {
          name: '头像5',
          url: './tx/5.png'
        }
      ]

      let imagesData = []
      let clickCoordinate = { x: 0, y: 0 }
      let target
      images.forEach(item => {
        // 创建 image 元素
        const image = new Image()
        image.src = item.url
        const name = item.name
        image.onload = () => {
          // 控制宽度为 200px （等宽）
          const w = 200

          // 高度按宽度 200px 的比例缩放
          const h = (200 / image.width) * image.height
          const x = Math.random() * (width - w)
          const y = Math.random() * (height - h)
          const imageObj = { image, name, x, y, w, h }
          imagesData.push(imageObj)
          draw(imageObj)
        }
      })

      // 渲染图片
      function draw(imageObj) {
        ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h)
      }

      // 为 canvas 添加鼠标按下事件
      canvas.addEventListener('mousedown', mousedownFn, false)

      // 鼠标按下触发的方法
      function mousedownFn(e) {
        // 获取元素按下时的坐标
        clickCoordinate.x = e.pageX - canvas.offsetLeft
        clickCoordinate.y = e.pageY - canvas.offsetTop

        // 判断选中的元素是哪一个
        checkElement()

        // 为 canvas 添加鼠标移动和鼠标抬起事件
        canvas.addEventListener('mousemove', mousemoveFn, false)
        canvas.addEventListener('mouseup', mouseupFn, false)

        // 鼠标移动触发
        function mousemoveFn() {}

        // 鼠标抬起触发
        function mouseupFn() {}

        function checkElement() {
          imagesData.forEach((item, index) => {
            const minX = item.x
            const maxX = item.x + item.w
            const minY = item.y
            const maxY = item.y + item.h
            if (minX <= clickCoordinate.x && clickCoordinate.x <= maxX && minY <= clickCoordinate.y && clickCoordinate.y <= maxY) {
              target = index
              console.log('点击的元素是：', item.name)
            }
          })
        }
      }
    </script>
  </body>
</html>
     -->

<!-- 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1000" height="500" tabindex="0" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取 Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')

      const width = canvas.width
      const height = canvas.height

      const images = [
        {
          name: '头像1',
          url: './tx/1.png'
        },
        {
          name: '头像2',
          url: './tx/2.png'
        },
        {
          name: '头像3',
          url: './tx/3.png'
        },
        {
          name: '头像4',
          url: './tx/4.png'
        },
        {
          name: '头像5',
          url: './tx/5.png'
        }
      ]

      let imagesData = []
      let clickCoordinate = { x: 0, y: 0 }
      let target
      images.forEach(item => {
        // 创建 image 元素
        const image = new Image()
        image.src = item.url
        const name = item.name
        image.onload = () => {
          // 控制宽度为 200px （等宽）
          const w = 200

          // 高度按宽度 200px 的比例缩放
          const h = (200 / image.width) * image.height
          const x = Math.random() * (width - w)
          const y = Math.random() * (height - h)
          const imageObj = { image, name, x, y, w, h }
          imagesData.push(imageObj)
          draw(imageObj)
        }
      })

      // 渲染图片
      function draw(imageObj) {
        ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h)
        ctx.beginPath()
        ctx.strokeStyle = '#fff'
        ctx.rect(imageObj.x, imageObj.y, imageObj.w, imageObj.h)
        ctx.stroke()
      }

      // 为 canvas 添加鼠标按下事件
      canvas.addEventListener('mousedown', mousedownFn, false)

      // // 鼠标按下触发的方法
      function mousedownFn(e) {
        // 获取元素按下时的坐标
        clickCoordinate.x = e.pageX - canvas.offsetLeft
        clickCoordinate.y = e.pageY - canvas.offsetTop

        // 判断选中的元素是哪一个
        checkElement()

        // 为 canvas 添加鼠标移动和鼠标抬起事件
        canvas.addEventListener('mousemove', mousemoveFn, false)
        canvas.addEventListener('mouseup', mouseupFn, false)
      }

      // 鼠标移动触发
      function mousemoveFn() {}

      // 鼠标抬起触发
      function mouseupFn() {}

      function checkElement() {
        imagesData.forEach((item, index) => {
          draw(item)
          if (ctx.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
            target = index
            console.log('点击的元素是：', item.name)
          }
        })
      }
    </script>
  </body>
</html>
      -->

<!-- 
        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1000" height="500" tabindex="0" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      // 获取 Canvas
      const canvas = document.getElementById('canvas')
      // 获取绘制上下文
      const ctx = canvas.getContext('2d')

      const width = canvas.width
      const height = canvas.height

      const images = [
        {
          name: '头像1',
          url: './tx/1.png'
        },
        {
          name: '头像2',
          url: './tx/2.png'
        },
        {
          name: '头像3',
          url: './tx/3.png'
        },
        {
          name: '头像4',
          url: './tx/4.png'
        },
        {
          name: '头像5',
          url: './tx/5.png'
        }
      ]

      let imagesData = []
      let clickCoordinate = { x: 0, y: 0 }
      let target
      images.forEach(item => {
        // 创建 image 元素
        const image = new Image()
        image.src = item.url
        const name = item.name
        image.onload = () => {
          // 控制宽度为 200px （等宽）
          const w = 200

          // 高度按宽度 200px 的比例缩放
          const h = (200 / image.width) * image.height
          const x = Math.random() * (width - w)
          const y = Math.random() * (height - h)
          const imageObj = { image, name, x, y, w, h }
          imagesData.push(imageObj)
          draw(imageObj)
        }
      })

      // 渲染图片
      function draw(imageObj) {
        ctx.drawImage(imageObj.image, imageObj.x, imageObj.y, imageObj.w, imageObj.h)
        ctx.beginPath()
        ctx.strokeStyle = '#fff'
        ctx.rect(imageObj.x, imageObj.y, imageObj.w, imageObj.h)
        ctx.stroke()
      }

      // 为 canvas 添加鼠标按下事件
      canvas.addEventListener('mousedown', mousedownFn, false)

      // // 鼠标按下触发的方法
      function mousedownFn(e) {
        // 获取元素按下时的坐标
        clickCoordinate.x = e.pageX - canvas.offsetLeft
        clickCoordinate.y = e.pageY - canvas.offsetTop

        // 判断选中的元素是哪一个
        checkElement()

        // 未选中的元素则 return
        if (target === undefined) return

        // 为 canvas 添加鼠标移动和鼠标抬起事件
        canvas.addEventListener('mousemove', mousemoveFn, false)
        canvas.addEventListener('mouseup', mouseupFn, false)
      }

      // 鼠标移动触发
      function mousemoveFn(e) {
        const moveX = e.pageX
        const moveY = e.pageY
        // 计算移动元素的坐标
        imagesData[target].x = imagesData[target].x + (moveX - clickCoordinate.x)
        imagesData[target].y = imagesData[target].y + (moveY - clickCoordinate.y)
        // 清空画布
        ctx.clearRect(0, 0, width, height)
        // 清空画布以后重新绘制
        imagesData.forEach(i => draw(i))
        // 赋值
        clickCoordinate.x = moveX
        clickCoordinate.y = moveY
      }

      // 鼠标抬起触发
      function mouseupFn() {
        // 鼠标抬起后移除事件
        canvas.removeEventListener('mousemove', mousemoveFn, false)
        canvas.removeEventListener('mouseup', mouseupFn, false)
        // 销毁选中元素
        target = undefined
      }

      function checkElement() {
        imagesData.forEach((item, index) => {
          draw(item)
          if (ctx.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
            target = index
            console.log('点击的元素是：', item.name)
          }
        })
      }
    </script>
  </body>
</html>
       -->
